<template>
  <div>
    <div>
      <a-form style="margin-top: 10px;margin-left: 5px;" :layout="'inline'">
        <a-form-item label="举报的内容">
          <a-input v-model:value="searchParams.content" placeholder="请输入举报的内容" allowClear/>
        </a-form-item>
        <a-form-item label="是否处理">
          <a-select
              ref="select"
              v-model:value="searchParams.isDispose"
              placeholder="请选择是否处理"
              style="width: 150px"
              allowClear
          >
            <a-select-option value="0">否</a-select-option>
            <a-select-option value="1">是</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-button @click="search" type="primary">
            <template #icon>
              <SearchOutlined/>
            </template>
            搜索
          </a-button>
          <a-button @click="resetSearch" class="main_rest">
            <template #icon>
              <SyncOutlined/>
            </template>
            重置
          </a-button>
        </a-form-item>
      </a-form>
    </div>

    <a-table :columns="columns" :data-source="reportList" :pagination="pagination"
             row-key="id" style="word-break: break-all;">
      <template v-slot:bodyCell="{ column, text, record }">
        <template v-if="column.dataIndex === 'operation'">
          <div>
          <span v-if="record.isDispose===0">
            <a-button @click="showAuditVisible(record.id)" class="main_operation_button" type="primary"
                      ghost>审核</a-button>
          </span>
            <span v-else>
            <a-button class="main_operation_button" type="primary" disabled>已审核</a-button>
              <a-button @click="showAuditVisible(record.id)" class="main_operation_button" type="primary"
                        ghost>修改</a-button>
            </span>
          </div>
        </template>
      </template>
    </a-table>

    <a-modal v-model:visible="auditVisible" title="审核" @ok="handleAuditReport">
      <a-textarea
          v-model:value="report.message"
          placeholder="请输入审核的内容"
          :auto-size="{ minRows: 2, maxRows: 5 }"
      />
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import {ref} from "vue";
import {auditReport, getReportList, searchReport} from "@/api/answer/report";
import {message, TableColumnType} from "ant-design-vue";
import {
  SyncOutlined,
  SearchOutlined
} from '@ant-design/icons-vue';

interface DataType {
  key: string;
  id: number;
}

//标签
const columns: TableColumnType<DataType>[] = [
  {
    title: '举报的用户id',
    align: "center",
    width: 200,
    dataIndex: 'userId',
  },
  {
    title: '问题id',
    align: "center",
    width: 200,
    dataIndex: 'problemId',
  },
  {
    title: '举报的内容',
    align: "center",
    width: 200,
    dataIndex: 'content',
  },
  {
    title: '是否处理',
    align: "center",
    width: 100,
    dataIndex: 'isDispose',
    customRender: (text: any) => {
      return text.value === 0 ? '未处理' : '已处理';
    }
  },
  {
    title: '管理员回复的内容',
    align: "center",
    width: 200,
    dataIndex: 'message',
  },
  {
    title: '创建时间',
    align: "center",
    dataIndex: 'createTime',
  },
  {
    title: '审核时间',
    align: "center",
    dataIndex: 'updateTime',
  },
  {
    title: '操作',
    align: "center",
    dataIndex: 'operation',
  },
];

//举报列表
const reportList = ref()

//获取举报列表
const handleReportList = () => {
  getReportList(pagination.value.current, pagination.value.pageSize).then((res) => {
    reportList.value = res.data.data.map.list
    pagination.value.total = res.data.data.map.total
  })
}

//分页参数
const pagination = ref({
  size: 'large',
  current: 1,
  pageSize: 10,
  total: 0,
  pageSizeOptions: ['10', '20', '30'],
  showTotal: (total: number) => {
    return " 共" + total + "条"
  },
  showSizeChanger: true,
  onShowSizeChange: (current: number, pageSize: number) => {
    pagination.value.pageSize = pageSize
    handleReportList()
  },
  onChange: (current: number) => {
    pagination.value.current = current
    handleReportList()
  }
})

//搜索参数
const searchParams = ref({
  content: '',
  isDispose: null,
})

//搜索
const search = () => {
  searchReport(searchParams.value).then((res) => {
    reportList.value = res.data.data.list
  })
}

//搜索表单重置
const resetSearch = () => {
  searchParams.value.content = ''
  searchParams.value.isDispose = null
  search()
}

const report = ref({
  id: 0,
  message: ''
})
//是否显示审核对话框
const auditVisible = ref<boolean>(false);

//显示审核对话框
const showAuditVisible = (id: number) => {
  report.value.id = id
  auditVisible.value = true
}

//审核举报
const handleAuditReport = () => {
  if (report.value.message != '') {
    auditReport(report.value.id, report.value.message).then((res) => {
      handleReportList()
      message.success(res.data.message)
      auditVisible.value = false
    })
  } else {
    message.warn("请输入审核的内容")
  }
}

handleReportList()
</script>

<style lang="less" scoped>
.main_operation {
  margin: 10px;
  display: flex;

  .main_operation_item {
    margin-right: 10px;
  }

  .main_operation_edit {
    background-color: palegreen;
    margin-right: 10px;
  }

  .main_operation_export {
    background-color: sandybrown;
    margin-right: 10px;
  }
}

.main_rest {
  margin-left: 5px;
}

.main_operation_button {
  margin: 5px;
}

:deep(.ant-form-item-control-input-content) {
  margin-bottom: 5px;
}
</style>